// 医生在线

<template>
  <div class="pre">
    <p>{{title}}</p>
    <div class="wrap">
      <div class="car">
        <p
          class="date"
        >{{new Date().getFullYear()}}年{{new Date().getMonth() + 1}}月{{new Date().getUTCDate()}}号</p>
        <p class="week">星期{{ getDay }}</p>
      </div>
      <div class="time">
        <p>{{timeType}}</p>
        <p>
          上午 : 9:00 - 12:00
          <span class="fr" type="primary" @click="online">上线</span>
        </p>
        <p>
          下午 : 14:00 - 17:00
          <span class="fr" type="primary" @click="downline">下线</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { setDuty } from "@/request/personnel";
export default {
  props: {
    title: {
      default: ""
    },
    timeType: {
      default: ""
    }
  },
  methods: {
    // 上线处理函数
    online() {
      setDuty({
        token: this.$token,
        is_duty: 1
      }).then(res => {
        console.log(res);
      });
      this.changePage();
    },
    // 下线处理函数
    downline() {
      setDuty({
        token: this.$token,
        is_duty: 0
      }).then(res => {
        console.log(res);
      });
      this.changePage();
    },
    changePage() {
      this.$emit("changeState", 0);
    }
  },
  computed: {
    getDay() {
      if (new Date().getDay() === 0) return "七";
      else if (new Date().getDay() === 1) return "一";
      else if (new Date().getDay() === 2) return "二";
      else if (new Date().getDay() === 3) return "三";
      else if (new Date().getDay() === 4) return "四";
      else if (new Date().getDay() === 5) return "五";
      else return "六";
    }
  }
};
</script>

<style lang="less" scoped>
.pre {
  width: 1200px;
  margin: 0 auto;
  height: 767px;
  padding-top: 40px;
  font-size: 16px;
}
.pre > p {
  font-size: 20px;
  color: #000;
  height: 70px;
  border: 1px solid #ccc;
  border-bottom: 0px;
  line-height: 70px;
  padding-left: 15px;
  background: #fff;

}
.wrap {
  border: 1px solid #ccc;
  padding-bottom: 150px;
  height: 550px;
  background: #fff;

}
.el-button {
  height: 22px;
  border: none;
  line-height: 22px;
  vertical-align: -10px;
}
.car,
.time {
  width: 400px;
  margin: 0 auto;
  text-align: center;
  padding: 40px;
  background: #F5F5F5;
  border-radius: 25px;
}
.car {
  background-color: #c8fff2;
  height: 200px;
  margin-top: 50px;
  overflow: hidden;
  .date {
    font-size: 25px;
    margin-top: 10px;
  }
  .week {
    font-size: 33px;
    margin-top: 30px;
  }
}
.time {
  border-radius: 25px;
  padding-left: 50px;
  box-sizing: border-box;
  text-align: left;
  margin-top: 30px;
  color: #4d4d4d;
  p {
    margin-top: 15px;
    span {
      background: #4eeec8;
      color: #fff;
      font-weight: 500;
      padding: 3px 15px;
      margin-right: 60px;
      margin-top: -5px;
      cursor: pointer;
    }
  }
}
</style>